<template>
  <div id="Info">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu></LeftMenu>
    </div>
    <!-- 中部菜单 -->
    <div class="MidMenu">
      <MidMenu v-on:tabTo="tabTo"></MidMenu>
    </div>
    <!-- 页脚 -->
    <div class="Footer">
      <Footer></Footer>
    </div>
    <div v-show="showTab==='全部'">
      <!--模块幻灯片 -->
      <div class="slide">
        <el-carousel :interval="4000" type="card" height="350px">
          <el-carousel-item v-for="(item,i) in slideData" :key="i" title="点击前往">
            <router-link :to="item.link" class="slideItem">
              <div>
                <img :src="item.image?item.image:'http://codeworld.fun/res/icons/CodeWorld.ico'" alt="img">
              </div>
              <div style="margin-left: 2%;">
                <h3 style="color: dodgerblue;">{{ item.title }}</h3>
                <p style="color: darkcyan">{{ item.blurb }}</p>
                <p style="color: darkcyan">更新时间：{{ item.time }}</p>
              </div>
            </router-link>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div v-show="showTab==='热点'" class="hotspot">
      <div class="hotspotSite">
        <div v-for="(it,i) in hotspotSite" :key=i class="hotspotItem">
          <hr style="margin-bottom: -20px">
          <a :href="it.href" target="_blank"><h4> {{ it.name }} </h4></a>
          <hr style="margin-top: -18px">
          <hr style="width: 90%;  border: thin slategrey groove;">
        </div>
      </div>
      <div style="height: 90%;overflow: auto;margin-top: -15px;">
        <div v-show="showTab==='热点'" class="hotspotTitle">
          <div class="hotspotItem">
            <p v-for="(it,i) in hotspotData" :key=i v-show="it.subtype==='知乎'">
              <a :href="it.from" target="_blank">
                {{ it.title.length > 15 ? it.title.substring(0, 14) : it.title }}
              </a>
            </p>
          </div>
          <div class="hotspotItem">
            <p v-for="(it,i) in hotspotData" :key=i v-show="it.subtype==='抖音'">
              <a :href="it.from" target="_blank">
                {{ it.title.length > 15 ? it.title.substring(0, 14) : it.title }}
              </a>
            </p>
          </div>
          <div class="hotspotItem">
            <p v-for="(it,i) in hotspotData" :key=i v-show="it.subtype==='百度'">
              <a :href="it.from" target="_blank">
                {{ it.title.length > 15 ? it.title.substring(0, 14) : it.title }}
              </a>
            </p>
          </div>
          <div class="hotspotItem">
            <p v-for="(it,i) in hotspotData" :key=i v-show="it.subtype==='掘金'">
              <a :href="it.from" target="_blank">
                {{ it.title.length > 15 ? it.title.substring(0, 14) : it.title }}
              </a>
            </p>
          </div>
          <div class="hotspotItem">
            <p v-for="(it,i) in hotspotData" :key=i v-show="it.subtype==='历史今天'">
              <a :href="it.from" target="_blank">
                {{ it.title.length > 15 ? it.title.substring(0, 14) : it.title }}
              </a>
            </p>
          </div>
          <div class="hotspotItem">
            <p v-for="(it,i) in hotspotData" :key=i v-show="it.subtype==='豆瓣电影'">
              <a :href="it.from" target="_blank">
                {{ it.title.length > 15 ? it.title.substring(0, 14) : it.title }}
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../components/head/LeftMenu'
import TopNav from '../../components/head/TopNav'
import MidMenu from "../../components/head/MidMenu";
import Footer from '../../components/foot/Footer'
import info from "../../apis/Info";
import CodeWeb from "../../assets/js/CodeWeb";

export default {
  name: 'Info',
  components: {LeftMenu, TopNav, MidMenu, Footer},

  data() {
    return {
      route: this.$route,
      searchTip: '站内搜索',
      inputValue: '',
      showTab: '全部',
      slideData: [
        {
          link: "/info?type=热点",
          image: "",
          title: "热点模块",
          blurb: "热点模块：部分建设完成，待更新...",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
        {
          link: "/info",//?type=资讯
          image: "",
          title: "资讯模块",
          blurb: "资讯模块：待建设",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
        /*{link: "/", image: "", title: "创作板块", blurb: "创作板块：建设中......"},*/
        {
          link: "/info",//?type=信息
          image: "",
          title: "信息模块",
          blurb: "信息模块：待建设",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
      ],
      hotspotData: [],
      hotspotSite: [
        {name: '知乎热榜', href: 'https://www.zhihu.com/hot'},
        {name: '抖音热点', href: 'https://www.douyin.com/hot'},
        {name: '百度热搜', href: 'https://top.baidu.com/board?tab=realtime'},
        {name: '掘金热文', href: 'https://juejin.cn/hot/articles'},
        {name: '历史今天', href: 'https://www.lssjt.com'},
        {name: '豆瓣电影', href: 'https://www.douban.com'},
      ],
      infoNewsData: [],
      infoData: [],
    }
  },
  created() {
    this.showTab = this.route.query.type ? this.route.query.type : '全部';
    this.info(this.showTab);
  },
  methods: {
    tabTo(e) {
      this.showTab = e;
      this.info(e);
    },
    info(type) {
      if (type === '全部') {

      } else {
        info.list({type: type}).then((res) => {
          if (res.status === 200 && res.data.finish) {
            switch (type) {
              case '热点':
                this.hotspotData = res.data.data;
                break;
              case '资讯':
                this.infoNewsData = res.data.data;
                break;
              case '信息':
                this.infoData = res.data.data;
                break;
              default:
                console.log(type);
                break;
            }
          } else {
            console.log(res);
          }
        })
      }
    },
    open(path) {
      window.open(path, '_blank');
    }
  },
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style>
#Info {
  background: url("src/assets/image/newsInfo.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
}

.LeftMenu {
}

.TopNav {
}

.MidMenu {
}

.hotspot {
  width: 100%;
  height: 88%;
  margin-top: 30px;
  color: azure;
}

.hotspotSite {
  width: 90%;
  margin-left: 5%;
  display: flex;
  color: azure;
}

.hotspotSite hr {
  width: 20%;
  border: thin orangered groove;
}

.hotspotSite h4:hover {
  color: greenyellow;
}

.hotspotTitle {
  width: 90%;
  padding-left: 5%;
  margin-top: -20px;
  display: flex;
  color: azure;
}

.hotspotItem {
  width: 20%;
  padding: 10px;
  text-align: center;
}

.hotspotItem p {
  height: 26px;
  background: darkslategrey;
}

.hotspotItem p:hover {
  color: white;
  background: seagreen;
}

.hotspotItem a {
  color: azure;
  text-decoration: none;
  border-bottom: thin greenyellow dotted;
  padding-bottom: 2px;
}

/*模块幻灯片*/
.slide {
  position: absolute;
  width: 60%;
  height: 40%;
  margin-top: 20%;
  margin-left: 20%;
}

el-carousel {
  opacity: 0.9;
}

.slideItem {
  height: 90%;
  font-size: 14px;
  line-height: normal;
  margin: 0;
  display: flex;
}

.slideItem:hover {
  font-size: 15px;

}

.slideItem img {
  width: 200px;
  height: 200px;
  margin-top: 30px;
}

.slideItem img:hover {
  width: 215px;
  height: 215px;
}

.slideItem:nth-child(2n) {
  background-color: aliceblue;
}

.slideItem:nth-child(2n+1) {
  background-color: azure;
}

/*模块幻灯片end*/

</style>
